<template>
  <RouterView v-if="isRouterActive"></RouterView>

  <div class="bottom1">
    <Playlittle v-if="judge()"></Playlittle>
    <playlist></playlist>
    <bottom v-show="!$route.meta.requiresAuth" class="bottom"></bottom>
  </div>
  <audio :src="store.state.nowplay.url" ref='audio' @timeupdate="currentTimeupdate()">
  </audio>
  <div class="bottom2"></div>
</template>



<script  setup  allowjs>

import bottom from './components/bottom/bottom.vue';
import playlist from './components/playlist/playlist.vue'
import { useRouter, useRoute } from 'vue-router';
import { onMounted, watch, ref, provide, nextTick } from 'vue';
import Playlittle from './components/playlittle/playlittle.vue';
import { useStore } from 'vuex' // 引入useStore 方法
import { transTime } from './config/transtime.js';
import { songdetail } from './api/music_style';


const router = useRouter()
const route = useRoute()
const audio = ref()
const store = useStore()
const isRouterActive = ref(true)
provide('reload', () => {
  isRouterActive.value = false
  nextTick(() => {
    isRouterActive.value = true
  })
})
onMounted(() => {
  router.push({
    path: '/find'
  })
})
watch(() => store.state.nowplay.id, () => {
  console.log('id改变')
  store.commit('changesong')
  store.state.nowplay.length = 0
  setTimeout(() => {
    if (store.state.nowplay.state == 'pause') {
      console.log('应该播放')
      store.state.audio.pause()
      setTimeout(() => {
        store.state.audio.play()
      }, 1000)
    }
  }, 100)
  islistfun()
}, {
  deep: true
})
const islistfun = async()=>{
  let islist = store.state.playlist.some(item => {
      return item.id == store.state.nowplay.id
  });
  if(islist == false){
    let data = await songdetail(store.state.nowplay.id)
    store.state.playlist.push(data.songs[0])
  }
}
let nextid = ref()
watch(() => store.state.nowplay.length, (newval) => {
  if (newval == 100) {
    for (let i = 0; i < store.state.playlist.length - 1; i++) {
      if (store.state.playlist[i].id == store.state.nowplay.id) {
        nextid.value = store.state.playlist[i + 1].id
        //store.commit('changesong')
      }
    }
    store.state.nowplay.id = nextid.value
  }
})
const currentTimeupdate = () => {
  store.state.audio = audio.value
  store.state.nowplay.currentTime = transTime(audio.value.currentTime)
  store.state.nowplay.length = (audio.value.currentTime / audio.value.duration) * 100
}
const judge = () => {
  if (route.meta.playlittle) {
    return false
  }
  else if (store.state.nowplay.url == '') {
    return false
  }
  else {
    return true
  }
}
</script>



<style scoped>
.bottom {
  position: static !important;
  bottom: 0%;
  width: 100%;
}

.bottom1 {
  position: absolute;
  bottom: 0%;
  width: 100%;
  z-index: 999;
  overflow: hidden;
}

.bottom2 {
  height: 150px;
}
</style>
